<template>
  <div class="user-manage">
    <div class="head" style="margin-bottom:20px">
      <div class="left"></div>
      <div class="right">
        <el-input v-model="searchText" placeholder="请输入订单号"></el-input>
        <el-button type="primary" @click="queryOrder">搜索</el-button>
        <el-button type="primary" @click="getAllOrder">显示全部</el-button>
      </div>
    </div>
    <hr />

    <!-- 编辑窗口 -->
    <el-dialog
      title="编辑客户信息"
      :visible.sync="orderUpdateFormVisible"
      width="50%"
      :before-close="handleClose"
    >
    <order-update-form :inf="orderUpdateData"></order-update-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="orderUpdateFormVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <div class="table">
      <el-table :data="tableData" style="width: 100%" stripe height="400">
        <el-table-column label="ID" width="150">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="业务类型" width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.serviceId == 1">包年宽带</span>
            <span v-if="scope.row.serviceId == 2">包月宽带</span>
          </template>
        </el-table-column>
        <el-table-column label="业务启动时间" width="150">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.startTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="业务结束时间" width="150">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.endTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="办理者" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.user.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDel(scope.$index, scope.row)"
              >删除订单</el-button
            >

            <el-button
              size="mini"
              type="success"
              @click="handleUpdate(scope.$index, scope.row)"
              >业务更改</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="sum-box" style="margin-top:20px">
      <el-date-picker
      v-model="duration"
      type="daterange"
      range-separator="-"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      value-format="yyyy-MM-dd"
    >
    </el-date-picker>
    <el-button type="primary" @click="sumOrderMoney">点击查询销售额</el-button>
    &nbsp; <b>总销售额：￥{{sum}}</b>

    </div>
    
  </div>
</template>


<script>
import OrderUpdateForm from './OrderUpdateForm.vue';
export default {
  name: "UserManage",
  components: {
    OrderUpdateForm,
  },
  data() {
    return {
      tableData: "", //表格数据
      searchText: "", //搜索框内容
      orderUpdateFormVisible: false, //打开编辑窗口
      orderUpdateData: "", //传送给编辑用户表单的数据
      duration:"",//查询总销售额的区间
      sum:0,//总金额
    };
  },
  methods: {
    // 获取所有订单
    getAllOrder() {
      let _this = this;
      this.$axios({
        url: "/order/getAllOrder",
        method: "post",
      }).then(function (resp) {
        _this.tableData = resp.data;
      });
    },
    // 搜索订单
    queryOrder() {
      let _this = this;
      this.$axios({
        url: "/order/queryOrder",
        method: "post",
        data: { id: _this.searchText },
      }).then(function (resp) {
        if (resp.data == "") {
          _this.tableData = "";
        } else {
          _this.tableData = [resp.data];
        }
      });
    },

    // 修改订单
    handleUpdate(index, row) {
      console.log(index);
      console.log(row);
      // alert(row)
      this.orderUpdateData = JSON.parse(JSON.stringify(row));
      this.orderUpdateFormVisible = true;
    },

    // 删除订单
    handleDel(index, row) {
      console.log(index);
      let _this = this;
      let flag = confirm("确定删除吗");
      if (flag) {
        this.$axios({
          url: "/order/deleteOrder",
          method: "post",
          data: row,
        }).then(function (resp) {
          if (resp.data == 1) {
            alert("删除成功");
          } else {
            alert("删除失败");
          }
          _this.getAllOrder();
        });
      }
    },

    //开通业务
    handleAdd(index, row) {
      console.log(index);
      this.orderAddData = {
        customerId: row.id,
        salesOrder: {
          userId: 1, //设为当前登录的用户
          startTime: new Date(),
          endTime: new Date(),
          serviceId: 1,
        },
      };
      this.orderAddFormVisible = true;
    },
    sumOrderMoney() {
      let _this = this;
      this.$axios({
        url: "/order/sumOrderMoney",
        method: "get",
        params: { start: _this.duration[0], end: _this.duration[1] },
      }).then(function (resp) {
        _this.sum = resp.data;
      });
    },
  },
  created() {
    this.getAllOrder();
  },
};
</script>


<style lang="less" scoped>
.user-manage {
  .head {
    display: flex;
    justify-content: space-between;
    .right {
      display: flex;
    }
  }
}
</style>

